/* 涵闸信息 弹框
* @ 劳兆城 
* @ 2017-08-12*/

<template>
	<interact-model 
		ref="interact-model"
		title="涵闸信息"
		class="waterGate-model">
		<div class="waterGate-warpper">
			<div class="waterGate-table">
				<table border class="table">
					<tbody>
						<tr>
							<td>闸号</td>
							<td>{{fliterData(' id ')}}</td>
							<td>涵闸名称</td>
							<td>{{fliterData('sluicegate_name')}}</td>
						</tr>
						<tr>
							<td>河流</td>
							<td>{{fliterData('river')}}</td>
							<td>所在街镇</td>
							<td>{{fliterData('town')}}</td>
						</tr>
						<tr>
							<td>所在堤围</td>
							<td>{{fliterData('dick_name')}}</td>
							<td>堤围桩号</td>
							<td>{{fliterData('stake_no')}}</td>
						</tr>
						<tr>
							<td>历史最高水位(米)</td>
							<td>{{fliterData('hightest_depth')}}</td>
							<td>历史最高水位发生时间(年、月、日)</td>
							<td>{{fliterData('hightest_time')}}</td>
						</tr>
						<tr>
							<td>建设(重建)(加固)时间</td>
							<td>{{fliterData('rebuild_time')}}</td>
							<td>设计流量(m3/s)</td>
							<td>{{fliterData('flow')}}</td>
						</tr>
						<tr>
							<td>设计启闭水头差(米)</td>
							<td>{{fliterData('waterhead')}}</td>
							<td>闸门形式及材料</td>
							<td>{{fliterData('gate_material')}}</td>
						</tr>
						<tr>
							<td>闸门启闭形式</td>
							<td>{{fliterData('gate_form')}}</td>
							<td>闸底板高程(m)</td>
							<td>{{fliterData('board_height')}}</td>
						</tr>
						<tr>
							<td>孔数(个)</td>
							<td>{{fliterData('holes')}}</td>
							<td>每孔净宽(m)</td>
							<td>{{fliterData('hole_width')}}</td>
						</tr>
						<tr>
							<td>孔高 (米)</td>
							<td>{{fliterData('hole_height')}}</td>
							<td>闸室总长(m)</td>
							<td>{{fliterData('gateroom_length')}}</td>
						</tr>
						<tr>
							<td>船室净宽(m)</td>
							<td>{{fliterData('shiproom_width')}}</td>
							<td>船室总长(m)</td>
							<td>{{fliterData('shiproom_length')}}</td>
						</tr>
						<tr>
							<td>捍卫面积(亩)</td>
							<td>{{fliterData('defence_area')}}</td>
							<td>涵闸类型</td>
							<td>{{fliterType('sluicegate_type')}}</td>
						</tr>
						<tr>
							<td>纬度</td>
							<td>{{fliterData('lat')}}</td>
							<td>经度</td>
							<td>{{fliterData('lng')}}</td>
						</tr>
						<tr>
							<td>备注</td>
							<td>{{fliterData('note')}}</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</interact-model>
</template>

<script>
	import {
		interactModelMixin,
		aPictureModelMixin
	} from 'common/js/mixins'

export default {
		mixins: [
			interactModelMixin,
			aPictureModelMixin
		],
		methods: {
			fliterType (key) {
				let str = ''
			switch (this.data[key]) {
					case '1':
						str = '中型水闸'
					break
				case '2':
						str = '中型船闸'
					break
				case '3':
						str = '小型窦闸'
					break
				case '4':
						str = '电排站穿堤涵管'
					break
				default:
						str = '--'
					break
			}
				return str
			},
			show (feature, layerNames) {
				this.$refs['interact-model'].showModel()
			if (layerNames) {
					this.data = feature.get('content').info || {}
			} else {
					this.data = feature.get('content') || {}
			}
			}
		}
	}
</script>

<style lang="scss">
	.waterGate-model {
		width: 700px;
		height: 540px;
		.waterGate-warpper {
			width: 100%;
			height: 100%;
			position: relative;
			padding: 5px;
			.waterGate-table {
				width: 100%;
				height: 100%;
				.table {
					width: 100%;
					font-size: 14px;
					border: 1px solid #ddd;
					td {
						width: 25%;
						padding: 5px;
					}
				}
			}
		}
	}
</style>